<template>
  <div class="padding-lr-xl">
    <el-card>

      <el-form
        :model="formData"
        :inline="true"
        ref="formRef"
        :rules="rules"
        label-width="auto"
        size="mini"
      >
        <el-row :gutter="5">
          <el-col :span="6">
            <el-form-item prop="channelIds" label="渠道名称">
              <el-select
                v-model="formData.channelIds"
                multiple
                collapse-tags
                filterable
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, key) in initData.channelNameMap"
                  :key="key"
                  :label="item"
                  :value="parseInt(key)"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="渠道能力">
              <el-select
                v-model="formData.channelAbilityIds"
                multiple
                collapse-tags
                filterable
                clearable
                placeholder="请选择"
                @focus="channelAbilityIdsOnFocus"
              >
                <el-option
                  v-for="(item, key) in channelAbilityMap"
                  :key="key"
                  :label="item"
                  :value="parseInt(key)"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="目的国家">
              <el-select
                v-model="formData.countryIds"
                multiple
                collapse-tags
                filterable
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, key) in initData.countryMap"
                  :key="key"
                  :label="item"
                  :value="parseInt(key)"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="部门">
              <el-select
                v-model="formData.deptIds"
                multiple
                collapse-tags
                filterable
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, key) in initData.deptMap"
                  :key="key"
                  :label="item"
                  :value="parseInt(key)"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="客户">
              <el-select
                v-model="formData.customerIds"
                :remote-method="searchCustomer"
                multiple
                collapse-tags
                placeholder="请输入至少两个关键字"
                clearable
                filterable
                remote
              >
                <el-option
                  v-for="(item, key) in customerMap"
                  :key="key"
                  :label="item"
                  :value="parseInt(key)">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="免收客户">
              <el-select
                v-model="formData.freeOfChargeCustomerIds"
                :remote-method="searchCustomer2"
                placeholder="请输入至少两个关键字"
                multiple
                collapse-tags
                clearable
                filterable
                remote
              >
                <el-option
                  v-for="(item, key) in customerMap2"
                  :key="key"
                  :label="item"
                  :value="parseInt(key)">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item prop="chargeTypes" label="对内/外收费">
              <el-select
                v-model="formData.chargeTypes"
                placeholder="请选择"
                multiple
              >
                <el-option
                  v-for="(item, key) in initData.chargeTypeMap"
                  :key="key"
                  :label="item"
                  :value="parseInt(key)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item prop="price" label="单价">
              <el-input type="number" v-model="formData.price" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item prop="unit" label="单位">
              <el-select
                v-model="formData.unit"
                clearable
                placeholder="请选择"
                style="width: 175px"
              >
                <el-option
                  v-for="(item, key) in initData.unitMap"
                  :key="key"
                  :label="item"
                  :value="parseInt(key)">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="最低收费">
              <el-input type="number" v-model="formData.lowestFee" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="最高收费">
              <el-input type="number" v-model="formData.highestFee" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="收费说明">
              <el-input type="text" v-model="formData.remark" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-button
              type="success"
              size="mini"
              @click="submitForm('formRef')"
            >
              保存
            </el-button>
          </el-col>
        </el-row>

        <el-row>
          <el-table
            :data="tableData"
          >
            <el-table-column
              label="中文品名"
              style="width: 100px"
              >
              <template slot-scope="scope">
                <el-input type="text" v-model="scope.row.declareNameCn" style="width: 150px" @input="setRemark(scope)"></el-input>
                <el-checkbox v-model="scope.row.declareNameCnLike" style="margin-left: 5px">模糊查询</el-checkbox>
              </template>
            </el-table-column>

            <el-table-column
              label="英文品名"
              >
              <template slot-scope="scope">
                <el-input type="text" v-model="scope.row.declareNameEn" style="width: 150px"></el-input>
                <el-checkbox v-model="scope.row.declareNameEnLike" style="margin-left: 5px">模糊查询</el-checkbox>
              </template>
            </el-table-column>

            <el-table-column
              label="清关编码"
              >
              <template slot-scope="scope">
                <el-input type="text" v-model="scope.row.customsClearanceCode" style="width: 150px"></el-input>
                <el-checkbox v-model="scope.row.customsClearanceCodeLike" style="margin-left: 5px">模糊查询</el-checkbox>
              </template>
            </el-table-column>

            <el-table-column
              label="材质"
              >
              <template slot-scope="scope">
                <el-input type="text" v-model="scope.row.material" style="width: 150px"></el-input>
                <el-checkbox v-model="scope.row.materialLike" style="margin-left: 5px">模糊查询</el-checkbox>
              </template>
            </el-table-column>

            <el-table-column
              label="用途"
             >
              <template slot-scope="scope">
                <el-input type="text" v-model="scope.row.purpose" style="width: 150px"></el-input>
                <el-checkbox v-model="scope.row.purposeLike" style="margin-left: 5px">模糊查询</el-checkbox>
              </template>
            </el-table-column>

            <el-table-column
              label="备注"
            >
              <template slot-scope="scope">
                <el-input type="text" v-model="scope.row.remark"></el-input>
              </template>
            </el-table-column>

            <el-table-column
              label="操作"
            >
              <template slot-scope="scope">
                <el-button icon="el-icon-circle-plus-outline" @click="addLine()"></el-button>
                <el-button v-if="scope.$index!=0" style="margin-left: 5px" icon="el-icon-remove-outline" @click="removeLine(scope)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-form>

    </el-card>
  </div>
</template>

<script>
  import { ajax } from "@/store/yg/common/utils";
  import { closeDialog } from "@/utils";

  export default {
    data() {
      return {
        customerMap: {},
        customerMap2: {},
        formData: {
          channelIds: [],
          channelAbilityIds: [],
        },
        channelAbilityMap: {},

        tableData: [{}],

        initData: {},

        rules: {
          channelIds: [{
            required: true,
            message: '请选择',
            trigger: 'blur'
          }],
          chargeTypes: [{
            required: true,
            message: '请选择',
            trigger: 'blur'
          }],
          price: [{
            required: true,
            message: '请选择',
            trigger: 'blur'
          }],
          unit: [{
            required: true,
            message: '请选择',
            trigger: 'blur'
          }]
        },
      };
    },

    methods: {

      /**
       * 保存配置
       * */
      async save() {
        //校验：中文品名等五个字段不能全部为空
        let tableData = this.tableData;
        for (const item of tableData) {
          if (!item.declareNameCn && !item.declareNameEn
            && !item.customsClearanceCode && !item.material
            && !item.purpose) {
            this.$message.error("中文品名等五个字段不能全部为空");
            return;
          }
        }
        this.formData.productConfigs = tableData;
        //请求后台
        const { code, data, message } = await ajax(
          "save",
          this.formData
        );
        if (code !== 200) {
          if (message) {
            this.$message.error(message);
          } else {
            this.$message.error("服务器异常");
          }
          return;
        }
        //赋值：主键id
        if (data) {
          this.formData.id = data;
        }
        //提示保存成功
        this.$message({
          type: "success",
          message: "保存成功！"
        });
        closeDialog();
      },

      //校验必填字段
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.save();
          } else {
            console.log("数据校验失败，不允许提交");
            return false;
          }
        });
      },

      /**
       * 查询客户
       * */
      async searchCustomer(query) {
        if (query !== "" && query.length > 1) {
          ajax("searchCustomer", { arg: query },{
            class: "com.tofba.app.client.setting.DiscountConfigClient"
          }).then(
            res => {
              if (res.code == 200) {
                this.customerMap = res.data;
              } else {
                this.$message.error("数据异常");
              }
            },
            error => {
              console.log(error);
            }
          );
        }
      },

      /**
       * 查询免收客户
       * */
      async searchCustomer2(query) {
        if (query !== "" && query.length > 1) {
          ajax("searchCustomer", { arg: query },{
            class: "com.tofba.app.client.setting.DiscountConfigClient"
          }).then(
            res => {
              if (res.code == 200) {
                this.customerMap2 = res.data;
              } else {
                this.$message.error("数据异常");
              }
            },
            error => {
              console.log(error);
            }
          );
        }
      },

      //初始化下拉框选项
      async init() {
        const { code, data, message } = await ajax(
          "getInitData",
          {}
        );
        if (code !== 200) {
          if (message) {
            this.$message.error(message);
          } else {
            this.$message.error("服务器异常");
          }
          return;
        }
        this.initData = data;
      },

      addLine() {
        this.tableData.push({});
      },

      removeLine(scope) {
        this.tableData.splice(scope.$index, 1);
      },

      setRemark(scope) {
        let declareNameCn = scope.row.declareNameCn;
        scope.row.remark = declareNameCn;
      },

      /**
       * 单选渠道名称时自动带出渠道能力
       * */
      async channelAbilityIdsOnFocus() {
        let length = this.formData.channelIds.length;
        if (length !== 1) {
          this.channelAbilityMap = {};
          this.formData.channelAbilityIds = [];
          return;
        }
        let channelId = this.formData.channelIds[0];
        const {code, data, message} = await ajax("getChannelAbilityMap", {arg: channelId});
        if (code !== 200) {
          if (message) {
            this.$message.error(message);
          } else {
            this.$message.error("服务器异常");
          }
          return;
        }
        this.channelAbilityMap = data;
      },

      /**
       * 编辑时回显数据
       * */
      async showEditData() {
        const res = await ajax("findById",
          {id: this.$store.state.edit.id}
        );
        if (res.code !== 200) {
          if (res.message) {
            this.$message.error(res.message);
          } else {
            this.$message.error("服务器异常");
          }
          return;
        }
        //请求成功
        this.formData = res.data;
        this.customerMap = res.data2;
        this.customerMap2 = res.data3;
        this.channelAbilityMap = res.data4;
        this.tableData = this.formData.productConfigs;
      },
    },

    mounted() {
      this.init();
      if (this.$store.state.edit.id) {
        this.showEditData();
      }
    }
  };
</script>


<style>

</style>
